<template>
	<view class="w-100 fs-b-b py-2 px-2-6">
		<view class="w-100 h296 f-b-c circle34 show0 mb-3 bg-f8ff re" v-for="(item,index) in list" :key="item.id">
			<ImageFile :url="item.thumbnail" mode="aspectFill" className="w226 h296 ty-circle-img"/>
			<view class="w470 bg-white h296 pl-4 pr-2 py-2 ty-circle-box re">
				<view class="font32 t-20 f-b-c re">
					<view class="font700 w314">{{item.goodsName}}</view>
					<view></view>
					<view class="font24 f-e-c w120 font400 ab top0 right0" :class="{'text-red':item.orderStatus == 'UNPAID','t-theme_1':item.orderStatus == 'PAID'}">{{set_pay_status(item.orderStatus)}}</view>
				</view>
				<view class="font21 t-8 py-1">{{item.createTime}}</view>
				<view class="font32 t-20 font700 py-1 f-y-e h52">
					<text class="font24 mr-05">¥</text>
					<text>{{item.payFee}}</text>
				</view>
				<view class="font24 t-8 f-b-c h24">共{{item.totalNum}}张</view>
				<view class="ab bottom20 right20 left0 h64 f-e-c font28 t-0 " >
					
					<view class="bg-theme circle20 h64 w164 f-c-c" @click="get_pay(item)" v-if="item.orderStatus === 'UNPAID'">立即支付</view>
					
					<view class="bg-theme circle20 h64 w164 f-c-c" @click="get_refund(item)" v-if="item.orderStatus === 'PAID' && !item.destroy && item.payFee">退款</view>
					
					<view class="bg-theme circle20 h64 w164 f-c-c ml-2" @click="details(item)">查看详情</view>
				</view>
			</view>
			<view class="ab left206 top0 bottom0">
				<view class="w16 h16 show0-in ab left12 top40 bg-f8ff rounded-circle"></view>
				<view class="w16 h16 show0-in ab left12 top72 bg-f8ff rounded-circle"></view>
				<view class="w16 h16 show0-in ab left12 top104 bg-f8ff rounded-circle"></view>
				<view class="w16 h16 show0-in ab left12 top136 bg-f8ff rounded-circle"></view>
				<view class="w16 h16 show0-in ab left12 top172 bg-f8ff rounded-circle"></view>
				<view class="w16 h16 show0-in ab left12 top204 bg-f8ff rounded-circle"></view>
				<view class="w16 h16 show0-in ab left12 top206 bg-f8ff rounded-circle"></view>
				<view class="w16 h16 show0-in ab left12 top238 bg-f8ff rounded-circle"></view>
				<view class="ab left0 w40 h40 bg-f8ff show-in-bottom" style="top:-20rpx;"></view>
				<view class="ab left0 w40 h40 bg-f8ff show-in-top" style="bottom:-20rpx;"></view>
			</view>
		</view>
		
		<!-- <uni-popup ref="open_popup" type="center">
			<view class="w696 h424 circle54 ov-hd re z-999">
				<view class="w-100 h116 bg-f8ff">
					<view class="w-100 h-100 bg-theme f-c-c rounded-bottom-54 t-0 font40 font600">退款提示</view>
				</view>
				<view class="w-100 h308 bg-theme">
					<view class="w-100 h-100 bg-f8ff rounded-right-54 px-6 py-3">
						<view class="font35 t-20 font700 py-2 t-a">确定要退款吗？</view>
						<view class="w-100 font32 t-20 f-b-c font600 pt-5">
							<view class="w240 h90 f-c-c bg-dd circle13" @click="set_cancel">取消</view>
							<view class="w240 h90 f-c-c bg-theme circle13" @click="set_determine">确定</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup> -->
		
	</view>
</template>

<script>
	import ImageFile from "../../../../components/img_file.vue"
	
	import wxPay from "../../../../common/weixinPay.js"
	
	export default{
		props:{
			list:{}, // 数据
			type:{}, // 来源
		},
		mixins:[wxPay],
		components:{
			ImageFile
		},
		data(){
			return{
				
			}
		},
		computed:{
			set_color(){
				let text = ''
				
			}
		},
		methods:{
			details(val){
				// 跳转到详情
				uni.setStorageSync("order_details",val)
				uni.navigateTo({
					url:`/pages/my/order/details?id=${val.id}`
				})
			},
			get_refund(val){
				uni.setStorageSync("order_refund",val)
				uni.navigateTo({
					url:`/pages/my/order/refund?id=${val.id}`
				})
			},
			get_pay(val){
				let data = {
					"orderIdList": [val.id],  // 订单id集合
					"payFee": val.goodsFee, // 支付金额
					id: val.id, //outTradeNo
				}
				this.get_wx_order(data)
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.ty-line-info{
		border-radius: 0 28rpx 28rpx 28rpx;
		margin-top: -32rpx;
	}
	.ty-circle-box{
		border-radius: 0 34rpx 34rpx 0;
	}
	.show-in-top{
		// box-shadow: 1rpx 0px 1rpx rgba(0,102,29,0.15) inset;
		transform: rotate(90deg);
		border-radius: 50% 0 0 50%;
	}
	.show-in-bottom{
		// box-shadow: 1rpx 0px 1rpx rgba(0,102,29,0.15) inset;
		transform: rotate(-90deg);
		border-radius: 50% 0 0 50%;
	}
</style>
